<template>
  <div class="header">
    <p class="title">待办事项</p>
    <input type="text" placeholder="请输入任务" class="new-todo" 
    v-model="name" @keyup.enter="enterName"> 
  </div>
  

</template>

<script setup>
import { ref } from 'vue';
const emit = defineEmits(["addTodo"])
const name = ref("");
function enterName(){
  // 先去除输入框内容的前后空格，避免用户只输入空格的情况
  // const inputValue = name.value.trim();
  // if (!inputValue) { // 判断是否为空
  //   alert("输入不能为空，请输入内容~"); // 提示用户
  //   return; // 终止函数，不执行后续操作
  // }
  emit("addTodo", name.value); // 输入不为空时，触发事件
  name.value = ""; // 清空输入框
}
</script>

<style scoped>
.header{
    box-shadow: 0px 2px 4px 0 #ddd;
}
.title{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: red;
}
.new-todo{
    width: 100%;
    height: 50px;
    box-shadow: inset 0px 2px 1px #ddd;
    padding: 6px 18px;
    font-size: 25px;
}
</style>